<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram Redrawing</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="450" height="450"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        const mainLineWidth = 2.5;
        const dimLineWidth = 1.5;
        const mainColor = '#000000';
        const fontStyle = "22px Times New Roman";
        const italicFontStyle = "italic 22px Times New Roman";
        const boldFontStyle = "bold 20px Times New Roman";

        // Geometric parameters
        const d = 80;
        const wireXStart = 50;
        const wireXEnd = 400;
        const wire1Y = 80;
        const wire2Y = wire1Y + d;
        const loopX = 150;
        const loopY = wire2Y + d;
        const loopSize = d;
        const dimLineX = wireXEnd - 20;

        // Function to draw an arrow
        function drawArrow(x, y, size, direction) {
            ctx.fillStyle = mainColor;
            ctx.beginPath();
            if (direction === 'right') {
                ctx.moveTo(x + size, y);
                ctx.lineTo(x, y - size / 2);
                ctx.lineTo(x, y + size / 2);
            }
            ctx.closePath();
            ctx.fill();
        }

        // --- Start Drawing ---

        // 1. Draw the two parallel wires
        ctx.lineWidth = mainLineWidth;
        ctx.strokeStyle = mainColor;

        ctx.beginPath();
        ctx.moveTo(wireXStart, wire1Y);
        ctx.lineTo(wireXEnd, wire1Y);
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(wireXStart, wire2Y);
        ctx.lineTo(wireXEnd, wire2Y);
        ctx.stroke();

        // 2. Draw the square loop
        ctx.strokeRect(loopX, loopY, loopSize, loopSize);

        // 3. Add labels for wires and currents
        ctx.fillStyle = mainColor;
        ctx.font = fontStyle;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        ctx.fillText("1", wireXStart - 25, wire1Y);
        ctx.fillText("2", wireXStart - 25, wire2Y);
        
        ctx.font = italicFontStyle;
        ctx.fillText("I", wireXStart + 100, wire1Y - 20);
        ctx.fillText("I", wireXStart + 100, wire2Y - 20);
        
        // 4. Draw current arrows on the wires
        drawArrow(wireXStart + 95, wire1Y, 10, 'right');
        drawArrow(wireXStart + 95, wire2Y, 10, 'right');
        
        // 5. Draw dimension lines and labels
        ctx.lineWidth = dimLineWidth;
        ctx.font = italicFontStyle;

        // Vertical dimension lines
        // d between wire 1 and wire 2
        ctx.beginPath();
        ctx.moveTo(dimLineX, wire1Y);
        ctx.lineTo(dimLineX, wire2Y);
        ctx.moveTo(dimLineX - 5, wire1Y);
        ctx.lineTo(dimLineX + 5, wire1Y);
        ctx.moveTo(dimLineX - 5, wire2Y);
        ctx.lineTo(dimLineX + 5, wire2Y);
        ctx.stroke();
        ctx.fillText("d", dimLineX + 20, wire1Y + d / 2);

        // d between wire 2 and loop
        ctx.beginPath();
        ctx.moveTo(dimLineX, wire2Y);
        ctx.lineTo(dimLineX, loopY);
        ctx.moveTo(dimLineX - 5, wire2Y);
        ctx.lineTo(dimLineX + 5, wire2Y);
        ctx.moveTo(dimLineX - 5, loopY);
        ctx.lineTo(dimLineX + 5, loopY);
        ctx.stroke();
        ctx.fillText("d", dimLineX + 20, wire2Y + d / 2);
        
        // d for loop height
        ctx.beginPath();
        ctx.moveTo(dimLineX, loopY);
        ctx.lineTo(dimLineX, loopY + loopSize);
        ctx.moveTo(dimLineX - 5, loopY);
        ctx.lineTo(dimLineX + 5, loopY);
        ctx.moveTo(dimLineX - 5, loopY + loopSize);
        ctx.lineTo(dimLineX + 5, loopY + loopSize);
        ctx.stroke();
        ctx.fillText("d", dimLineX + 20, loopY + d / 2);

        // Horizontal dimension line for loop width
        const hDimY = loopY + loopSize + 30;
        ctx.lineWidth = dimLineWidth/2; // Extension lines are often thinner
        ctx.beginPath();
        ctx.moveTo(loopX, loopY + loopSize);
        ctx.lineTo(loopX, hDimY);
        ctx.moveTo(loopX + loopSize, loopY + loopSize);
        ctx.lineTo(loopX + loopSize, hDimY);
        ctx.stroke();
        
        ctx.lineWidth = dimLineWidth;
        ctx.beginPath();
        ctx.moveTo(loopX, hDimY);
        ctx.lineTo(loopX + loopSize, hDimY);
        ctx.moveTo(loopX, hDimY - 5);
        ctx.lineTo(loopX, hDimY + 5);
        ctx.moveTo(loopX + loopSize, hDimY - 5);
        ctx.lineTo(loopX + loopSize, hDimY + 5);
        ctx.stroke();
        ctx.fillText("d", loopX + loopSize / 2, hDimY + 18);
        
        // 6. Add the Figure caption
        ctx.font = boldFontStyle;
        ctx.fillText("Fig. 2.30", canvas.width / 2 - 40, canvas.height - 20);

    </script>
</body>
</html>